<!--
 * @Author: ChunLai
 * @Date: 2022-09-21 17:50:48
 * @LastEditTime: 2025-11-24 10:45:06
 * @Description: 多被保人
 * @FilePath: \01.latest-short-insure\src\views\form\components\MultiAssured.vue
-->
<template>
  <div class="insuPage">
    <div class="topSec">
      <span>
        <div class="form-head-name">被保险人信息</div>
        <div class="tit_tips">给谁买谁就是被保险人</div>
      </span>
    </div>
    <div v-if="!bbrRefresh">
      <div
        class="userCell"
        v-for="(item, index) in assuredList"
        :key="`bbr${index}item`"
      >
        <AssuredItem :ref="`multi-bbr${index}`" :pindex="index"></AssuredItem>
      </div>
    </div>
    <div class="add_item_box" v-if="canAddBtnMore">
      <div class="addCell" @click="addUserItem()">
        <van-icon name="add-o" size="20px" />
        <span class="ft15 ml4">添加被保险人</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AssuredItem from "./AssuredItem";
export default {
  name: "MultiAssuredModule",
  components: { AssuredItem },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      bbrRefresh: "insert/bbrRefresh",
      assuredList: "insert/assuredList",
      bbrAddItemMax: "page/bbrAddItemMax",
    }),
    canAddBtnMore() {
      let res = true;
      const numLen = this.assuredList.length;
      if (numLen >= this.bbrAddItemMax) {
        res = false;
      }
      return res;
    },
  },
  created() {},
  mounted() {
    this.$store.commit("insert/SET_BBR_REFRESH", false);
  },
  methods: {
    saveForm() {
      let breakTips = [];
      let resObj = { status: true };
      const bnfLen = this.assuredList.length;
      if (bnfLen > 0) {
        for (let index = 0; index < bnfLen; index++) {
          let flag = this.$refs[`multi-bbr${index}`][0].saveForm();
          if (!flag.status) {
            resObj = flag;
            break;
          } else {
            if (flag.breakTips.length > 0) {
              resObj.breakTips = [...breakTips, ...flag.breakTips];
            }
          }
        }
        return resObj;
      }
    },
    addUserItem() {
      if (!this.canAddBtnMore) {
        return this.$toast("根据保司要求,被保人个数已达上限");
      }
      this.$store.commit("insert/ADD_ASSURED");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.topSec {
  padding-bottom: 0;
}
.tips_txt {
  padding: 5px;
  text-align: center;
  font-size: 12px;
  background: #ffffff;
}

.add_item_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  margin-top: 15px;
  .addCell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-family: MiSans;
    background: #ffffff;
    color: #f54040;
    border: 1px solid #f54040;
    border-radius: 40px;
  }
}
</style>
